<template>
    <el-button
            type="primary"
            plain
            icon="el-icon-plus"
           
            @click="handleAddStrategy"
    >新增
    </el-button>
    <!-- 查询结果 -->
    <el-table :data="strategyListData" style="width: 100%">
        <el-table-column label="策略名称" align="center" prop="strategyName"/>
        <el-table-column label="告警等级" align="center">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.alarmLevel">
                    <el-option
                            v-for="dict in alarmLevelOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="警报消息" align="center" prop="alarmMessage"/>
        <el-table-column label="通知方式" align="center">
            <template v-slot="scope">
                <el-select disabled v-model="scope.row.notifyMethod">
                    <el-option
                            v-for="dict in notifyMethodOptions"
                            :key="dict.dictValue"
                            :label="dict.dictLabel"
                            :value="dict.dictValue"
                    ></el-option>
                </el-select>
            </template>
        </el-table-column>
        <el-table-column label="通知人" align="center" prop="notifyUsernames"/>
        <el-table-column label="操作" align="center" width="180px">
            <template v-slot="scope">
                <el-button icon="el-icon-edit"
                           @click="handleUpdateStrategy(scope.row)">修改
                </el-button>
                <el-button icon="el-icon-delete"
                           @click="handleDeleteStrategy(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 新增或修改 -->
    <update-strategy :title="title" :form="alarmStrategy" :notify-method-options="notifyMethodOptions"
                     :alarm-level-options="alarmLevelOptions"
                     :open="open" v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update-strategy>
</template>

<script>
    import {getStrategyList, delStrategy} from '/src/api/alarm/strategy'
    import updateStrategy from './update.vue'

    export default {
        name: "index",
        components: {updateStrategy},
        data() {
            return {
                strategyListData: [],
                strategyListTotal: 0,
                //通知方式
                notifyMethodOptions: [],
                //告警等级
                alarmLevelOptions: [],
                //弹出框状态
                open: false,
                //新增或修改
                title: '',
                alarmStrategy: {},
            }
        },
        created() {
            this.getStrategyListByParam();
            this.getDicts("notify_method").then(response => {
                this.notifyMethodOptions = response.data;
            });
            this.getDicts("alarm_level").then(response => {
                this.alarmLevelOptions = response.data;
            });
        },
        methods: {
            getStrategyListByParam() {
                getStrategyList(this.queryParams).then((res) => {
                    this.strategyListData = res.rows
                    this.strategyListData.forEach((strategy) => {
                        let notifyUserIds = []
                        let notifyUsernames = []
                        if (strategy.notifyUsers) {
                            strategy.notifyUsers.forEach((notifyUser) => {
                                notifyUserIds.push(notifyUser.userId)
                                notifyUsernames.push(notifyUser.nickName)
                            })
                        }
                        strategy.notifyUserIds = notifyUserIds
                        strategy.notifyUsernames = notifyUsernames
                    })
                    this.strategyListTotal = res.total
                })
            },
            handleAddStrategy() {
                this.title = "新增策略信息"
                this.open = true
            },
            handleUpdateStrategy(row) {
                this.alarmStrategy = row
                this.title = '修改策略信息'
                this.open = true
            },
            handleDeleteStrategy(row) {
                this.$confirm('是否确认删除策略为"' + row.strategyName + '"的数据项?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    return delStrategy(row.strategyId)
                }).then(() => {
                    this.getStrategyListByParam()
                    this.msgSuccess('删除成功')
                })
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getStrategyListByParam()
            },
        },
    }
</script>

<style scoped>

</style>
